<script setup>
import {
  menuMgrListService,
  menuMgrUpdateService,
  menuMgrDeleteService,
} from "@/api"; // 引入API服务
import { ref, reactive, onMounted } from "vue"; // 引入Vue的响应式和生命周期函数
import {
  Delete,
  Edit,
  Search,
  Refresh,
  Lock,
  Plus,
} from "@element-plus/icons-vue"; // 引入Element Plus的图标
import MenuEdit from "./components/MenuEdit.vue"; // 引入菜单编辑组件
import { formatStutas, formatTime } from "@/utils/format"; // 引入格式化工具函数

// 初始化加载状态、表格数据和编辑组件的引用
const loading = ref(false);
let tableData = ref([]);
const getList = async () => {
  loading.value = true; // 设置加载状态为true
  let { data } = await menuMgrListService(); // 请求菜单列表数据
  console.log(data);
  tableData.value = data; // 更新表格数据
  loading.value = false; // 设置加载状态为false
};
getList(); // 初始化时加载列表

const menuEditRef = ref(); // 引用菜单编辑组件

// 添加菜单项
const onAdd = (row) => {
  menuEditRef.value.open(row, "add");
};

// 编辑菜单项
const onEdit = async (row) => {
  menuEditRef.value.open(row, "edit");
};

// 删除菜单项
const onDelete = async (row) => {
  console.log(row.children.length > 0);
  console.log("删除", row);
  if (row.children.length > 0) {
    return ElMessage.warning("菜单项存在子菜单，不能删除！");
  }
  // 显示删除确认框
  await ElMessageBox.confirm(
    `你确认删除“${row.name}”这条菜单吗？`,
    "温馨提示",
    {
      type: "warning",
      confirmButtonText: "确认",
      cancelButtonText: "取消",
    }
  );

  await menuMgrDeleteService(row.id);
  ElMessage({ type: "success", message: "删除成功" });
  getList();
};

// 编辑成功后的操作，重新加载列表
const onSuccess = (type) => {
  getList();
};
</script>
<template>
  <pageContainer title="菜单管理">
    <template #extra>
      <el-button type="primary" @click="onAdd()">添加菜单</el-button>
    </template>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      default-expand-all
      v-loading="loading"
    >
      <el-table-column prop="name" label="菜单名称" />
      <el-table-column prop="component" label="路由名称" />
      <el-table-column prop="status" label="状态" width="150">
        <template #default="{ row }">
          <el-tag :type="row.status == 1 ? 'primary' : 'warning'">
            {{ formatStutas(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" prop="updateTime">
        <template #default="{ row }">
          {{ formatTime(row.updateTime, "YYYY年MM月DD日 HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="添加子菜单"
            placement="left"
          >
            <el-button
              :icon="Plus"
              circle
              plain
              type="success"
              @click="onAdd(row)"
            ></el-button>
          </el-tooltip>

          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="onEdit(row)"
          ></el-button>

          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="onDelete(row)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>

    <!-- 抽屉 -->
    <MenuEdit ref="menuEditRef" @success="onSuccess"></MenuEdit>
  </pageContainer>
</template>
